﻿<template>
  <div class="reset" ref="reset">
    <div class="reset_header">
      设置
      <img src="../../static/img/back_ccc.png" class="goback"/>
    </div>
    <div style="height:11.7vw;"></div>
    <div class="user_info">
      <div class="user_info_left">
        <img src="../../static/img/bg_all.png" class="user_info_img"/>

      </div>
      <div class="user_info_right">
        <div class="user_info_mess_box">
          <div class="user_info_m_h">
            华南师范大学
          </div>
          <div class="user_info_mid">
            <div class="user_i_m">笔名</div>
            <div class="user_i_m">性别</div>
            <div class="user_i_m">星座</div>
          </div>
          <div class="user_info_address">

          </div>
        </div>
      </div>
    </div>

    <div class="wrap_list_all clearfix">
      <ul class="bottom_list">
        <li class="min_list">
          <span class="pad_le">绑定微信</span>
          <img src="../../static/img/go_to_list-.png" class="img_go_To"/>
        </li>
        <li class="min_list">
          <span class="pad_le">密码修改</span>
          <img src="../../static/img/go_to_list-.png" class="img_go_To" />
        </li>
        <li class="min_list">
          <span class="pad_le">换手机号</span>
          <img src="../../static/img/go_to_list-.png" class="img_go_To" />
        </li>
      </ul>
      <ul class="bottom_list">
        <li class="min_list">
          <span class="pad_le">提醒设置</span>
          <img src="../../static/img/go_to_list-.png" class="img_go_To" />
        </li>
        <li class="min_list">
          <span class="pad_le">地址管理</span>
          <img src="../../static/img/go_to_list-.png" class="img_go_To" />
        </li>
      </ul>
      <ul class="bottom_list">
        <li class="min_list">
          <span class="pad_le">联系我们</span>
          <img src="../../static/img/go_to_list-.png" class="img_go_To" />
        </li>
        <li class="min_list">
          <span class="pad_le">关于我们</span>
          <img src="../../static/img/go_to_list-.png" class="img_go_To" />
        </li>
        <li class="min_list">
          <span class="pad_le">评论有礼</span>
          <img src="../../static/img/go_to_list-.png" class="img_go_To" />
        </li>
        <li class="min_list">
          <span class="pad_le">帮助反馈</span>
          <img src="../../static/img/go_to_list-.png" class="img_go_To" />
        </li>
      </ul>
      <div class="last_bottom clearfix">
        <div class="last_b_btn clearfix">
          退出登录
        </div>
      </div>
    </div>
    </div>
</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  //import Header_other from "./header_other/Header_other.vue";
  //limit_Scroll
  import limit_scroll from "../../static/js/limit_scroll.js"


export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  ...mapActions([
    "thom_redirect",
  ]),
  ...mapMutations([
     "Change_certain_layer"
  ]),
  mounted: function () { 
   
  },
  methods: {
   
  },
  components: {
    
  }
}
</script>
<style>
  #app {
    background-color: #c6c6c6;
  }

</style>
<style scoped>
  .last_b_btn {
    width: 52vw;
    height: 11.7vw;
    line-height: 11.7vw;
    color: #fff;
    background-color: #de3939;
    border-radius:2vw;
    margin:1.3vw auto;
  }
  .last_bottom {
    background-color: #eeeeee;
    height: 14vw;
    margin-top: 5vw;
  } 
  .min_list {
    position: relative;
    background-color: #4c4c4c;
  } 
  .bottom_list {
    margin-top: 2.9vw;
  }
  .img_go_To{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    right:5.3vw;
    width:2.6vw;
  } 
  .pad_le {
    margin-left: 8vw;
  } 
  .min_list {
    height: 10.4vw;
    line-height: 10.4vw;
    background-color: #eeeeee;
    border-bottom: 1px solid #c6c6c6;
    text-align: left;
    width: 100%;
    color: #4c4c4c;
  } 
  .wrap_list_all {
    background-color: #c6c6c6;
    width: 100%;
  } 
  .user_info_address {
    height: 13.3vw;
    border-radius: 0 0 2vw 2vw;
    background-color: #fff;
    display: block;
    resize: none;
    padding: 0;
    border: 0;
    width: 100%;
  } 
  .user_i_m {
    border-right: 1px solid #eeeeee;
    border-bottom: 1px solid #eee;
    width: 100%
  } 
  .user_info_m_h {
    color: #fff;
    background-color: #fea501;
    text-align: center;
    line-height: 6.4vw;
    height: 6.4vw;
    border-radius: 2vw 2vw 0 0;
    font-size: 4vw;
  }
  .user_info_mid {
    display: flex;
    background-color: #fff;
    height: 7.2vw;
    font-size: 3vw;
    color: #9f5c2f;
    font-size:3vw;
    justify-content:space-around;
    text-align:center;
    border-left: 1px solid #eeeeee;
    line-height: 7.2vw;
    border-bottom: 1px solid #eee;
  } 
  .user_info_mess_box {
    width: 60vw;
    margin-top: 5vw;
    margin-bottom: 4vw;
    margin-left: 7.8vw;
  } 
  .reset_header {
    height: 11.7vw;
    line-height: 11.7vw;
    background-color: #874920;
    color: #fff;
    position: fixed;
    font-size: 4vw;
    top:0;
    width:100%;
  }
  .goback{
    width:4.4vw;
    height:4.8vw;
    position:absolute;
    left:2.6vw;
    top:50%;
    transform:translateY(-50%)
  }
  .user_info {
    display: flex;
    height: 36.2vw;
    width: 100%;
    background-color: #9f5c2f;
  }
  .user_info_img{
    width:20.6vw;
    height:20.6vw;
    border-radius:50%;
    margin-left:7vw;
    margin-top:6.4vw;
  }
</style>